<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="author" content="zhienchen">
    <link rel="shortcut icon" href="style/img/book.png" type="image/png">
    <meta name="description" content="欢迎来到我的博客"/>
    <title>Welcome | Bolg</title>
    <link href="style/css/style.css" type="text/css" rel="stylesheet"/>
    <link href="style/css/prism.css" rel="stylesheet"/>
</head>

<body>
<div class="main">
    <div class="top">
        <ul id="tabs"></ul>
    </div>
    <div class="mid">
        <div class="nav">
            <h2>目录</h2>
            <div class="navlist" id="navlist"></div>
        </div>
        <div class="content">
            <div class="content_mid" id="content_mid">
                <div style="display: flex;justify-content: center;">
                    <img src="https://v1.jinrishici.com/all.svg?font-size=45&spacing=4"/>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">Copyright © 2020-2020 zhienchen All Rights Reserved.</div>
</div>
<script src="style/js/jquery.min.js"></script>
<script src="style/js/showdown.min.js"></script>
<script src="style/js/prism.js"></script>
<script>
    var data;
    $(document).ready(function () {
        $.get('./catalogue.json', function (res) {
            data = res;
            console.log(data);
            var lis = ['<li><a href="./">首页</a></li>'];
            var navs = [];
            $.each(data, function (index, item) {
                if (item.url === undefined) {
                    lis.push("<li><a onClick=\"updateNav('" + index + "');\">" + item.tab_name + "</a></li>")
                }else {
                    navs.push("<a onClick=\"toHtml('" + "./" + item.url + "');\">" + item.title + "</a>")
                }
            })
            $("#tabs").append(lis.join(''));
            $("#navlist").empty().append(navs.join(''));
        });
    });

    function updateNav(currId) {
        var navs = [];
        var currDir = data[currId];
        $.each(currDir.children, function (index, item) {
            navs.push("<a onClick=\"toHtml('" + currDir.dir + "/" + item.url + "');\">" + item.title + "</a>");
        });
        $("#navlist").empty().append(navs.join(''));
        toHtml(currDir.dir + "/" + currDir.children[0]["url"]);
    }

    function toHtml(url) {
        $("#content_mid").load(encodeURI(url), function (responseTxt, statusTxt, xhr) {
            if (statusTxt === "success") {
                var converter = new showdown.Converter({
                    tables: true,
                    ghCodeBlocks: true
                });
                $("#content_mid").html(converter.makeHtml(responseTxt).replace(/<pre><code>/g, "<pre><code class='language-css'>"));
                Prism.highlightAll();  // 再次运行Prism.js
            } else if (statusTxt === "error"){
                alert("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    }
</script>
</body>
</html>